{{ define "js"}}

	<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>
	<script>
		$(document).ready(function () {
			$('#blocks').DataTable({
				processing: true,
				serverSide: true,
				ordering: false,
				searching: false,
				ajax: '/validator/{{.Index}}/proposedblocks',
				pagingType: 'full',
				columnDefs: [
					{
						targets: 0,
						data: '0',
						render: function (data, type, row, meta) {
							return '<a href="/epoch/' + data + '">' + data + '</a>'
						}
					}, {
						targets: 3,
						data: '3',
						render: function (data, type, row, meta) {
							return moment.unix(data).fromNow();
						}
					},
					{
						targets: 4,
						data: '4',
						render: function (data, type, row, meta) {
							if (data.length < 64) {
								return 'N/A'
							} else {
								return '<a href="/block/' + data + '">0x' + data.substr(0, 8) + '...</a>'
							}
						}
					},
					{
						targets: 1,
						data: '1',
						render: function (data, type, row, meta) {
							return '<a href="/block/' + data + '">' + data + '</a>'
						}
					}
				]
			});
			$('#attestations').DataTable({
				processing: true,
				serverSide: true,
				ordering: false,
				searching: false,
				ajax: '/validator/{{.Index}}/attestations',
				pagingType: 'full',
				columnDefs: [
					{
						targets: 0,
						data: '0',
						render: function (data, type, row, meta) {
							return '<a href="/epoch/' + data + '">' + data + '</a>'
						}
					}, {
						targets: 1,
						data: '1',
						render: function (data, type, row, meta) {
							return '<a href="/block/' + data + '">' + data + '</a>'
						}
					}, {
						targets: 3,
						data: '3',
						render: function (data, type, row, meta) {
							return moment.unix(data).fromNow();
						}
					}
				]
			})
		})
	</script>

	<script src="https://code.highcharts.com/stock/highstock.js"></script>
	<script src="https://code.highcharts.com/modules/exporting.js"></script>
	<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
	<script src="/js/highcharts-global-options.js"></script>

	<script>
		Highcharts.stockChart('balancechart', {
			colors: ["#7cb5ec", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"],
			rangeSelector: {
				enabled: false
			},
			chart: {
				type: 'line'
			},
			title: {
				text: 'Balance History for Validator {{.Index}}'
			},
			legend: {
					enabled: true
			},
			xAxis: {
				type: 'datetime',
				range: 7 * 24 * 60 * 60 * 1000,
				labels: {
					formatter: function(){
						var epoch = timeToEpoch(this.value)
						var orig = this.axis.defaultLabelFormatter.call(this)
						return `${orig}<br/>Epoch ${epoch}`
					}
				}
			},
			yAxis: [{
				title: {
					text: 'Balance [ETH]'
				},
				opposite: false
			}],
			series: [{
				name: "Balance",
				data: {{.BalanceHistoryChartData}}
			}, {
				name: "Effective Balance",
				step: true,
				data: {{.EffectiveBalanceHistoryChartData}}
			}],
			tooltip: {
				formatter: function(tooltip) {
					var orig = tooltip.defaultFormatter.call(this, tooltip)
					var epoch = timeToEpoch(this.x)
					orig[0] = `${orig[0]}<span style="font-size:10px">Epoch ${epoch}</span>`
					return orig
				}
			}
		});
	</script>
	{{if .DailyProposalCount}}
		<script>
			var data = {{.DailyProposalCount}};
			var proposed = data.map(d => [d.Day * 1000, d.Proposed]);
			var missed = data.map(d => [d.Day * 1000, d.Missed]);
			var orphaned = data.map(d => [d.Day * 1000, d.Orphaned]);

			Highcharts.stockChart('proposedChart', {
				colors: ["#7cb5ec", "#ff835c", "#e4a354", "#2b908f", "#f45b5b",
					"#91e8e1"],
				title: {
					text: 'Proposal History for Validator {{.Index}}'
				},
				chart: {
					type: 'column',
				},
				xAxis: {
					lineWidth: 0,
					tickColor: '#e5e1e1',
					range: 7 * 24 * 3600 * 1000
				},
				legend: {
					enabled: true
				},
				yAxis: [
					{
						title: {
							text: '# of Possible Proposals'
						},
						opposite: false
					}
				],
				plotOptions: {
					column: {
						stacking: 'normal',
						dataGrouping: {
							enabled: true,
							forced: true,
							units: [
								['day', [1]]
							]
						}
					}
				},
				series: [
					{
						name: 'Proposed',
						data: proposed
					},
					{
						name: 'Missed',
						data: missed
					},
					{
						name: 'Orphaned',
						data: orphaned
					}
				],
				rangeSelector: {
					enabled: false
				},
			})
		</script>
	{{end}}

	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
	<script type="text/javascript">

		function setTooltip(message) {
			$('#copy-button').tooltip('hide')
				.attr('data-original-title', message)
				.tooltip('show');
		}

		function hideTooltip() {
			setTimeout(function () {
				$('#copy-button').tooltip('hide')
					.attr('data-original-title', 'Copy public key to clipboard')
			}, 1000);
		}

		var clipboard = new ClipboardJS('#copy-button');

		clipboard.on('success', function (e) {
			setTooltip('Public key copied!');
			hideTooltip();
		});

		clipboard.on('error', function (e) {
			setTooltip('Failed to copy public key!');
			hideTooltip();
		});
	</script>

	<script>
		$('span[aria-ethereum-date]').each(function () {
			var d = $(this).attr('aria-ethereum-date');
			$(this).html(moment.unix(d).fromNow())
		})
	</script>

	<script type="text/javascript">
		var validators = []
		var validatorIdx = {{.Index}}+''
		$(document).ready(function () {
			updateDashboardButtons()
			$('#remove-from-dashboard-button').click(function(){
				validators = validators.filter(function(v, i, a){
					if (v === validatorIdx) return false
					return true
				})
				validators.sort(sortValidators)
				localStorage.setItem('dashboard_validators', JSON.stringify(validators))
				$('#add-to-dashboard-button').show()
				$('#remove-from-dashboard-button').hide()
				$(this).tooltip('hide')
			})
			$('#add-to-dashboard-button').click(function(){
				validators.push(validatorIdx)
				validators.sort(sortValidators)
				localStorage.setItem('dashboard_validators', JSON.stringify(validators))
				$('#add-to-dashboard-button').hide()
				$('#remove-from-dashboard-button').show()
				$(this).tooltip('hide')
			})
		})
		window.addEventListener('storage', function(e){
			// note: this fires only if storage changes within another tab
			updateDashboardButtons()
		})
		function updateDashboardButtons() {
			var validatorIsInDashboard = false
			var validatorsStr = localStorage.getItem('dashboard_validators')
			if (validatorsStr) {
				try { 
					validators = JSON.parse(validatorsStr)
				} catch(e) { 
					console.error('error parsing localStorage.dashboard_validators', e)
					validators = []
				}
			} else {
				validators = []
			}
			for (var i=0; i<validators.length; i++) {
				if (validators[i] === validatorIdx) {
					validatorIsInDashboard = true
					break
				}
			}
			$('#remove-from-dashboard-button').hide()
			$('#add-to-dashboard-button').hide()
			if (validatorIsInDashboard) {
				$('#remove-from-dashboard-button').show()
			} else {
				$('#add-to-dashboard-button').show()
			}
		}
		function sortValidators(a, b) {
			var ai = parseInt(a)
			var bi = parseInt(b)
			return ai - bi
		}
	</script>

{{end}}

{{ define "css"}}
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css"/>
{{end}}

{{ define "content"}}
	<div class="my-3 py-2">
		<div class="d-md-flex justify-content-md-between">
			<div class="d-flex mb-1">
				<h1 class="h4 mb-1 mb-md-0">
					<span>Validator {{.Index}}</span>
					<button class="btn btn-light btn-sm" type="button" id="copy-button"
							data-toggle="tooltip" data-placement="right"
							title="Copy public key to clipboard"
							data-clipboard-text="0x{{printf "%x" .PublicKey}}">
						<i class="fa fa-copy"></i>
					</button>
					<button class="btn btn-light btn-sm" type="button" id="add-to-dashboard-button"
							style="display:none;"
							data-toggle="tooltip" data-placement="right"
							title="Add validator to dashboard">
						<i class="fa fa-plus"></i>
					</button>
					<button class="btn btn-light btn-sm" type="button" id="remove-from-dashboard-button"
							style="display:none;"
							data-toggle="tooltip" data-placement="right"
							title="Remove validator from dashboard">
						<i class="fa fa-minus"></i>
					</button>
				</h1>
			</div>
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb font-size-1 mb-0" style="padding:0; background-color:transparent;">
					<li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
					<li class="breadcrumb-item"><a href="/validators" title="Validators">Validators</a></li>
					<li class="breadcrumb-item active" aria-current="page">Validator details</li>
				</ol>
			</nav>
		</div>
		<div class="text-monospace text-secondary text-truncate text-sm mb-0"
			 id="copy-input">0x{{printf "%x" .PublicKey}}</div>
	</div>
	
	<ul style="margin-bottom: -1px;" class="nav nav-tabs justify-content-start" id="pills-tab" role="tablist">
		<li class="nav-item">
			<a class="nav-link active" id="pills-overview-tab" data-toggle="pill" href="#pills-overview"
				 role="tab" aria-controls="pills-overview" aria-selected="true">Overview</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" id="pills-blocks-tab" data-toggle="pill" href="#pills-blocks" role="tab"
				 aria-controls="pills-blocks" aria-selected="false">Proposed Blocks <span
						class="badge bg-secondary text-white">{{.ProposedBlocksCount}}</span></a>
		</li>
		<li class="nav-item">
			<a class="nav-link" id="pills-attestations-tab" data-toggle="pill"
				 href="#pills-attestations"
				 role="tab" aria-controls="pills-attestations" aria-selected="false">Attestations <span
						class="badge bg-secondary text-white">{{.AttestationsCount}}</span></a>
		</li>
		{{/*
<li class="nav-item"
>*/}} {{/* <a class="nav-link" href="#">Deposits <span class="badge bg-secondary text-white">{{.DepositsCount}}</span></a
>*/}} {{/* </li
>*/}} {{/*
<li class="nav-item"
>*/}} {{/* <a class="nav-link" href="#">Exits <span class="badge bg-secondary text-white">{{.VoluntaryExitscount}}</span></a
>*/}} {{/* </li
>*/}} {{/*
<li class="nav-item"
>*/}} {{/* <a class="nav-link" href="#">Slashings <span class="badge bg-secondary text-white">{{.SlashingsCount}}</span></a
>*/}} {{/* </li
>*/}}
	</ul>
	<style>
		.validator-card {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
	</style>
	<div class="card validator-card">
		<div class="card-body px-0 py-1">
			<div class="tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="pills-overview" role="tabpanel"
					 aria-labelledby="pills-overview-tab">
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Unique Index:</div>
						<div class="col-md-10">{{.Index}}</div>
					</div>
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Current Balance:</div>
						<div class="col-md-10">{{.CurrentBalance | formatBalance}}</div>
					</div>
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Effective Balance:</div>
						<div class="col-md-10">{{.EffectiveBalance | formatBalance}}</div>
					</div>
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Income:</div>
						<div class="col-md-10">1 day: {{.Income1d | formatIncome}} | 7 days: {{.Income7d | formatIncome}} | 31 days: {{.Income31d | formatIncome}}</div>
					</div>

					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Status:</div>
						{{if eq .Status "ActiveOffline"}}
							<div class="col-md-10"><span data-toggle="tooltip" title="No attestation in the last 2 epochs"><b>Active</b> <i class="fas fa-power-off fa-sm text-danger"></i></span></div>
						{{else if eq .Status "SlashingOffline"}}
							<div class="col-md-10"><span data-toggle="tooltip" title="No attestation in the last 2 epochs"><b>Slashing</b> <i class="fas fa-power-off fa-sm text-danger"></i></span></div>
						{{else if eq .Status "ExitingOffline"}}
							<div class="col-md-10"><span data-toggle="tooltip" title="No attestation in the last 2 epochs"><b>Exiting</b> <i class="fas fa-power-off fa-sm text-danger"></i></span></div>
						{{else if (or (eq .Status "Active") (eq .Status "Slashing") (eq .Status "Exiting")) }}
							<div class="col-md-10"><b>{{.Status}}</b> <i class="fas fa-power-off fa-sm text-success"></i></div>
						{{else}}
							<div class="col-md-10"><b>{{.Status}}</b></div>
						{{end}}
					</div>
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Slashed:</div>
						<div class="col-md-10">{{.Slashed}}</div>
					</div>
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-2">Eligible for Activation:</div>
						<div class="col-md-10"><span
									title="{{.ActivationEligibilityTs}}"
									data-toggle="tooltip"
									aria-ethereum-date="{{.ActivationEligibilityTs.Unix}}">{{.ActivationEligibilityTs}}</span>
							(Epoch {{.ActivationEligibilityEpoch}})
						</div>
					</div>
					<div class="row border-bottom p-3 mx-0">
						{{if eq .Status "Pending"}}
							<div class="col-md-2">Estimated Activation:</div>
						{{else}}
							<div class="col-md-2">Active since:</div>
						{{end}}
						<div class="col-md-10"><span
									title="{{.ActivationTs}}"
									data-toggle="tooltip"
									aria-ethereum-date="{{.ActivationTs.Unix}}">{{.ActivationTs}}</span>
							(Epoch {{.ActivationEpoch}})
						</div>
					</div>
					{{if eq .Status "Ejected"}}
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Exit on:</div>
							<div class="col-md-10"><span
										title="{{.ExitTs}}"
										data-toggle="tooltip"
										aria-ethereum-date="{{.ExitTs.Unix}}">{{.ExitTs}}</span>
								(Epoch {{.ExitEpoch}})
							</div>
						</div>
						<div class="row border-bottom p-3 mx-0">
							<div class="col-md-2">Withdrawable on:</div>
							<div class="col-md-10"><span
										title="{{.WithdrawableTs}}"
										data-toggle="tooltip"
										aria-ethereum-date="{{.WithdrawableTs.Unix}}">{{.WithdrawableTs}}</span>
								(Epoch {{.WithdrawableEpoch}})
							</div>
						</div>
					{{end}}
					<div class="row border-bottom p-3 mx-0">
						<div class="col-md-12">
							<div id="balancechart" height="200px"></div>
						</div>
					</div>
					<div class="row p-3 mx-0">
						<div class="col-md-12">
							<div id="proposedChart" height="200px"></div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="pills-blocks" role="tabpanel" aria-labelledby="pills-blocks-tab">
					<div class="table-responsive my-3">
						<table class="table" id="blocks" width="100%">
							<thead>
							<tr>
								<th>Epoch</th>
								<th>Slot</th>
								<th>Status</th>
								<th>Time</th>
								<th>Root Hash</th>
								<th>Attestations</th>
								<th>Deposits</th>
								<th>Slashings <span data-toggle="tooltip" data-placement="top"
													title="Proposers">P</span> /
									<span data-toggle="tooltip" data-placement="top" title="Attesters">A</span></th>
								<th>Exits</th>
							</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>
				</div>
				<div class="tab-pane fade" id="pills-attestations" role="tabpanel"
					 aria-labelledby="pills-attestations-tab">
					<div class="table-responsive my-3">
						<table class="table" id="attestations" width="100%">
							<thead>
							<tr>
								<th>Epoch</th>
								<th>Slot</th>
								<th>Status</th>
								<th>Time</th>
								<th>Committee Index</th>
							</tr>
							</thead>
							<tbody></tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
{{end}}
